<template>
  <div>
    <Row>
      <Col :xxl="24" :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <div class="projTitle">项目综合看板</div>
      </Col>
    </Row>
    <Row class="mt-2 bg-white">
      <Col :xxl="24" :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <Card :loading="loading">
          <template v-for="item in navItems" :key="item">
            <CardGrid style="width: 10%">
              <span class="flex flex-col items-center">
                <Icon :icon="item.icon" :color="item.color" size="20" />
                <span class="text-md mt-2">{{ item.title }}</span>
              </span>
            </CardGrid>
          </template>
        </Card>
      </Col>
    </Row>
    <Row class="mt-2" :gutter="10">
      <Col :xxl="6" :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
        <!-- 项目状态 -->
        <projStatus :loading="loading" />
      </Col>
      <Col :xxl="7" :xl="7" :lg="7" :md="7" :sm="24" :xs="24">
        <!-- 项目类型 -->
        <projType :loading="loading" />
      </Col>
      <Col :xxl="7" :xl="7" :lg="7" :md="7" :sm="24" :xs="24">
        <!-- 项目来源 -->
        <projSource :loading="loading" />
      </Col>
      <Col :xxl="4" :xl="4" :lg="4" :md="4" :sm="24" :xs="24">
        <!-- 项目负责人 -->
        <projCharge :loading="loading" />
      </Col>
    </Row>
    <Skeleton :loading="loading">
      <Row class="mt-2 bg-white">
        <Col :xxl="6" :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
          <!-- 项目任务进度 -->
          <div
            class="w-[80%] h-[80px] flex items-center justify-center bg-white hover:shadow-md m-4"
          >
            <span class="text-[28px] text-blue-800 font-bold truncate">项目任务进度</span>
          </div></Col
        >
        <Col :xxl="8" :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
          <!-- 项目名称 -->
          <div class="w-[80%] h-[100px] bg-white hover:shadow-md p-4 flex flex-col">
            <div class="text-gray-800 font-bold truncate">项目名称</div>
            <div class="flex space-x-4 mt-4">
              <Select placeholder="请输入项目名称" size="small" show-search style="width: 400px" />
            </div> </div
        ></Col>
        <Col :xxl="10" :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
          <!-- 项目任务状态 -->
          <div class="w-[90%] h-[100px] bg-white hover:shadow-md p-4">
            <div class="text-gray-800 mb-2 font-bold truncate">项目任务状态</div>
            <div class="flex space-x-4">
              <div
                v-for="(status, index) in statusList"
                :key="index"
                @click="toggleActive(index)"
                class="px-6 py-1 border rounded-md cursor-pointer h-[30px] truncate"
                :class="activeIndex === index ? 'bg-blue-500 text-white' : 'bg-white'"
              >
                {{ status }}
              </div>
            </div>
          </div></Col
        >
      </Row></Skeleton
    >
    <!-- 项目任务 -->
    <Row class="mt-2" :gutter="10">
      <Col :xxl="4" :xl="4" :lg="4" :md="4" :sm="24" :xs="24">
        <!-- 里程碑 -->
        <div class="h-[450px] flex flex-col gap-2 p-1">
          <div class="flex-1">
            <!-- 里程碑任务数 -->
            <CollapseContainer title="里程碑任务数" :loading="loading">
              <div class="flex items-center justify-center h-[151px]">
                <CountTo
                  suffix="个"
                  :color="'rgb(27, 70, 179)'"
                  :startVal="1"
                  :endVal="2"
                  :duration="8000"
                  style="font-size: 40px"
                />
              </div>
            </CollapseContainer>
          </div>
          <div class="flex-1">
            <!-- 已完成里程碑任务 -->
            <CollapseContainer title="已完成里程碑任务" :loading="loading">
              <div class="flex items-center justify-center h-[151px]"
                ><CountTo
                  suffix="个"
                  :color="'rgb(27, 70, 179)'"
                  :startVal="1"
                  :endVal="5"
                  :duration="8000"
                  style="font-size: 40px"
              /></div>
            </CollapseContainer>
          </div>
        </div>
      </Col>
      <Col :xxl="16" :xl="16" :lg="16" :md="16" :sm="24" :xs="24">
        <!-- 项目任务甘特图 -->
        <div class="h-[450px] p-1">
          <CollapseContainer title="项目任务甘特图">
            <div class="gantt_control">
              <Space class="bg-white w-[100%] h-[50px]">
                <Select v-model:value="skinValue" style="width: 150px" @change="handleChangeSkin">
                  <SelectOption value="terrace">默认皮肤</SelectOption>
                  <SelectOption value="skyblue">天蓝色</SelectOption>
                  <SelectOption value="meadow">草地色</SelectOption>
                  <SelectOption value="broadway">百老汇</SelectOption>
                  <SelectOption value="material">材料主题</SelectOption>
                  <SelectOption value="contrast_white">高对比度主题 - 白色</SelectOption>
                  <SelectOption value="contrast_black">高对比度主题 - 黑色</SelectOption>
                </Select>
                <a-button type="primary" preIcon="clarity:zoom-in-line" @click="zoomIn"
                  >放大</a-button
                >
                <a-button preIcon="clarity:zoom-out-line" @click="zoomOut">缩小</a-button>
                <RadioGroup v-model:value="selectedScale" @change="setZoomLevel">
                  <Radio value="day" ref="scale1">天</Radio>
                  <Radio value="week" ref="scale2">周</Radio>
                  <Radio value="month" ref="scale3">月</Radio>
                  <Radio value="quarter" ref="scale4">季</Radio>
                  <Radio value="year" ref="scale5">年</Radio>
                </RadioGroup>
              </Space>
            </div>
            <div ref="ganttRef" style="width: 100%; height: 325px"></div>
          </CollapseContainer>
        </div>
      </Col>
      <Col :xxl="4" :xl="4" :lg="4" :md="4" :sm="24" :xs="24">
        <!-- 任务 -->
        <div class="h-[450px] flex flex-col gap-2 p-1">
          <div class="flex-1">
            <!-- 任务数 -->
            <CollapseContainer title="任务数" :loading="loading">
              <div class="flex items-center justify-center h-[151px]"
                ><CountTo
                  suffix="个"
                  :color="'rgb(27, 70, 179)'"
                  :startVal="1"
                  :endVal="20"
                  :duration="8000"
                  style="font-size: 40px"
              /></div>
            </CollapseContainer>
          </div>
          <div class="flex-1">
            <!-- 已完成任务 -->
            <CollapseContainer title="已完成任务" :loading="loading">
              <div class="flex items-center justify-center h-[151px]"
                ><CountTo
                  suffix="个"
                  :color="'rgb(27, 70, 179)'"
                  :startVal="1"
                  :endVal="0"
                  :duration="8000"
                  style="font-size: 40px"
              /></div>
            </CollapseContainer>
          </div>
        </div>
      </Col>
    </Row>
    <!-- 项目里程碑进度 -->
    <Row class="mt-2">
      <Col :xxl="24" :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <BasicTable @register="registerTable" :loading="loading" />
      </Col>
    </Row>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import {
    Row,
    Col,
    Card,
    Skeleton,
    Space,
    RadioGroup,
    Radio,
    Select,
    SelectOption,
  } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { navItems, ProjColumns } from './projComponents/data';
  import { gantt } from 'dhtmlx-gantt';
  import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

  import projStatus from './projComponents/projStatus.vue';
  import projType from './projComponents/projType.vue';
  import projSource from './projComponents/projSource.vue';
  import projCharge from './projComponents/projCharge.vue';

  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicTable, useTable } from '/@/components/Table';
  import { CountTo } from '/@/components/CountTo/index';

  const CardGrid = Card.Grid;
  const loading = ref(true);

  setTimeout(() => {
    loading.value = false;
  }, 1500);

  // 项目任务状态
  const statusList = ['未开始', '进行中', '已完成', '已延期'];
  const activeIndex = ref(null); // 记录选中的索引

  const toggleActive = (index) => {
    activeIndex.value = activeIndex.value === index ? null : index;
  };

  // 定义侧边标题
  const selectedScale = ref<string>('year');
  const zoomConfig = {
    levels: [
      {
        name: 'day',
        scale_height: 27,
        min_column_width: 80,
        scales: [{ unit: 'day', step: 1, format: '%d %M' }],
      },
      {
        name: 'week',
        scale_height: 50,
        min_column_width: 50,
        scales: [
          {
            unit: 'week',
            step: 1,
            format: function (date) {
              var dateToStr = gantt.date.date_to_str('%d %M');
              var endDate = gantt.date.add(date, -6, 'day');
              var weekNum = gantt.date.date_to_str('%W')(date);
              return '#' + weekNum + ', ' + dateToStr(date) + ' - ' + dateToStr(endDate);
            },
          },
          { unit: 'day', step: 1, format: '%j %D' },
        ],
      },
      {
        name: 'month',
        scale_height: 50,
        min_column_width: 120,
        scales: [
          { unit: 'month', format: '%F, %Y' },
          { unit: 'week', format: 'Week #%W' },
        ],
      },
      {
        name: 'quarter',
        height: 50,
        min_column_width: 90,
        scales: [
          { unit: 'month', step: 1, format: '%M' },
          {
            unit: 'quarter',
            step: 1,
            format: function (date) {
              var dateToStr = gantt.date.date_to_str('%M');
              var endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day');
              return dateToStr(date) + ' - ' + dateToStr(endDate);
            },
          },
        ],
      },
      {
        name: 'year',
        scale_height: 50,
        min_column_width: 30,
        scales: [{ unit: 'year', step: 1, format: '%Y' }],
      },
    ],
  };
  const ganttTasks = reactive({
    data: [
      {
        id: 1,
        text: '任务测试1',
        start_date: '17-01-2020',
        end_date: '19-01-2020',
        duration: 3,
        progress: 0.6,
        open: true,
      },
      {
        id: 2,
        text: '任务测试2',
        start_date: '17-02-2020',
        end_date: '17-03-2020',
        duration: 3,
        progress: 0.4,
        parent: 1,
        open: true,
      },
    ],
  });

  const ganttRef = ref();
  const initGantt = () => {
    // 清空之前的配置
    gantt.clearAll();
    // 设置中文
    gantt.i18n.setLocale('cn');
    // 特殊配置
    gantt.config.grid_width = 550; // 左侧宽度
    gantt.config.columns = [
      { name: 'wbs', label: '大纲', width: 40, template: gantt.getWBSCode },
      { name: 'text', label: '任务名称', tree: true, width: 200, align: 'center' },
      { name: 'start_date', label: '开始时间', width: 90, align: 'center' },
      { name: 'duration', label: '持续时间', width: 50, align: 'center' },
      { name: 'end_date', label: '结束时间', width: 90, align: 'center' },
      { name: 'add', label: '', width: 40 },
    ];
    // 显示配置
    gantt.ext.zoom.init(zoomConfig);
    gantt.ext.zoom.setLevel(selectedScale.value);
    gantt.ext.zoom.attachEvent('onAfterZoom', (level, config) => {
      selectedScale.value = config.name;
    });
    // 初始化甘特图
    gantt.init(ganttRef.value);
    // 渲染数据
    gantt.parse(ganttTasks);
  };
  const zoomIn = () => {
    gantt.ext.zoom.zoomIn();
  };

  const zoomOut = () => {
    gantt.ext.zoom.zoomOut();
  };

  const setZoomLevel = (e) => {
    gantt.ext.zoom.setLevel(e.target.value);
  };
  // 动态设置皮肤
  const skinValue = ref('terrace');

  const handleChangeSkin = (value: string) => {
    const link = document.createElement('link');

    link.onload = () => {
      gantt.resetSkin();
      gantt.render();
    };

    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.id = 'skin';
    link.href = `node_modules/dhtmlx-gantt/codebase/skins/dhtmlxgantt_${value}.css`;

    const existingLink = document.querySelector('#skin');

    if (existingLink) {
      document.head.replaceChild(link, existingLink);
    } else {
      document.head.appendChild(link);
    }

    skinValue.value = value;
  };
  onMounted(() => {
    initGantt();
  });

  const [registerTable] = useTable({
    title: '项目里程碑进度',
    columns: ProjColumns(),
    useSearchForm: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    rowKey: 'id',
    bordered: true,
    maxHeight: 400,
  });
</script>

<style lang="less" scoped>
  .projTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 28px;
    color: #fff;
    background: url('/@/assets/images/workbench/projHeader.png') no-repeat;
  }

  .gantt_control {
    background: #ededed;
    text-align: center;
  }

  ::v-deep(div.gantt_cal_light) {
    height: 290px !important;
  }
</style>
